<template>
  <div>

    <el-row :gutter="32">
      <el-col :lg="12">
        <div class="ml20 mt20">


          <el-row :gutter="20">
            <el-col :span="12">
              <div class="ml30">
                <div class="text-size-40 text-black  ">{{now_month}}</div>



              </div>

            </el-col>
            <el-col :span="12">
              <div class="classflex-end mt30 ">

                <el-button @click="addscheduling" type="primary"><i class="el-icon-upload ">新增排课</i></el-button>
                <el-button class="mr30" @click="changescheduling" style="width: 100px;">调整排课</el-button>

              </div>

            </el-col>
          </el-row>



          <!-- {{queryParamsScheduling}} -->
          <!-- <br> -->
          <!-- {{classCourse}} -->
          <el-form :model="queryParamsScheduling" ref="queryForm" :inline="true" v-show="showSearch" class="mt40"
            label-width="68px">
            <div>
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-cascader style="width: 100%;" v-model="classCourse" :options="courseList" @change="handleChange">
                  </el-cascader>
                </el-col>
                <el-col :span="7">
                  <el-select v-model="classTeacher" placeholder="请选择教师" filterable>
                    <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName"
                      :value="dict.nickName">
                    </el-option>

                  </el-select>
                </el-col>
                <el-col :span="7">
                  <el-select v-model="classStudent" placeholder="请选择学员" filterable>
                    <el-option v-for="dict in studentList" :key="dict.id" :label="dict.userName" :value="dict.userName">
                    </el-option>

                  </el-select>
                </el-col>
                <!--  <el-col :span="4" class="classflex-end">
                  <el-button type="primary" @click="getSchedulingList">课程搜索</el-button>
                </el-col> -->
              </el-row>

            </div>
            <div class="">
              <el-calendar v-model="calendardata">
                <template slot="dateCell" slot-scope="{date, data}">


                  <br />
                  <div class="text-black classflex-center">
                    {{ data.day.split('-').slice(2).join('-') }}
                  </div>
                  <div v-if=" my_date2(data.day)" class=" text-orange classflex-center mt10">


                    {{my_date(data.day)}}
                  </div>
                  <div v-if="!my_date2(data.day)" class="text-green classflex-center mt10">


                    {{my_date(data.day)}}
                  </div>

                </template>
              </el-calendar>
            </div>

          </el-form>
        </div>

      </el-col>





      <el-col :lg="12">

        <div class="xian">
          <div class="mr20">
            <div class="ml30 mt20">
              <div class="grid-content bg-purple-dark    text-size-23-w700 ml10 "> {{result_numberall}}
                {{formatDate2(calendardata)}} {{week_day}}
              </div>
            </div>
            <div class="content ml20">

              <el-empty :image-size="300" v-if="schedulingList.length==0"></el-empty>
              <el-card class="itemright" v-else v-for="item in schedulingList" :key="item.id">
                <div @click="tonow(item)">
                  <div class="classflex-space-between">
                    <div>
                      <div class="classflex-left">
                        <div class=" text-size-30 text-lv "><i
                            class="el-icon-alarm-clock mr10 "></i>{{item.classStart}}-{{item.classFinish}}</div>
                        <div class=" text-size-16 text-gray ml20 ">{{item.classHours}}课时</div>
                      </div>

                      <div class=" text-size-14 text-gray  mt10 hovertext mt20"><i
                          class="el-icon-s-fold mr10"></i>班级：{{item.className||"默认班级"}}/{{item.classCourse}}
                      </div>
                      <div class=" text-size-14 text-gray mt10 hovertext mt20"><i
                          class="el-icon-user mr10"></i>教师：{{item.classTeacher}} ·学员：{{item.classStudent}}人
                      </div>
                    </div>

                    <div class="ml30">
                      <div v-if="item.state=='未开始'" class="ellipse  text-gray">
                        <div class="classflex-left">
                          <div class="scheduling_unstart mr10"></div>
                          {{item.state||"未知状态" }}
                        </div>

                      </div>
                      <div v-if="item.state=='进行中'" class="ellipse  text-info ">
                        <div class="classflex-left">
                          <div class="scheduling_doing mr10"></div>
                          {{item.state||"未知状态" }}
                        </div>
                      </div>
                      <div v-if="item.state=='待结算'" class="ellipse text-orange">
                        <div class="classflex-left">
                          <div class="scheduling_end mr10"></div>
                          {{item.state||"未知状态" }}
                        </div>
                      </div>
                      <div v-if="item.state=='已结算'" class="ellipse text-green">
                        <div class="classflex-left">
                          <div class="scheduling_finish mr10"></div>

                          {{item.state||"未知状态" }}
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>

    <add-scheduling-drawer class="" ref="SchedulingDrawer" @AddSchedulingSuccess="addSchedulingSuccess">

    </add-scheduling-drawer>
    <school-timetable-drawer class="" ref="SchoolTimetableDrawer" @detel="getSchedulingList" @closeSchoolTimetableDrawer="getSchedulingList">

    </school-timetable-drawer>




  </div>
</template>

<script>
  import AddSchedulingDrawer from '@/components/AddSchedulingDrawer'
  import SchoolTimetableDrawer from '@/components/SchoolTimetableDrawer'
  import {
    calculateDaysAfter,
    calculateDaysBetween
  } from "@/utils/ruoyi";

  import {
    schedulingtablelist,
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";
  import {
    listCourse_And_Class,
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  export default {
    name: "Scheduling",
    dicts: ['class_circulate'],
    components: {

      AddSchedulingDrawer,
      SchoolTimetableDrawer
    },
    data() {
      return {

        classStudent: null,
        classTeacher: null,
        classCourse: null,
        calendardata: new Date(),
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程表表格数据
        schedulingList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParamsScheduling: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          schedulingremark: null,
          schedulingremark2: null,
          schedulingremark3: null,
          schedulingremark4: null,
          schedulingremark5: null,
          schedulingremark6: null,
          schedulingremark7: null,
          schedulingremark8: null,
          schedulingremark9: null,
          schedulingremark10: null,
          classId: null,
          studyDate: null,
          week: null,
          state: null,
          reach: null,
          unreach: null,
          askforleave: null,
          attendance: null,
          totalConsumption: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        // 学生信息表格数据
        studentList: [],

        queryParamsStudent: {},
        userList: [],
        queryParamsTeacher: {},

        queryParamsSchool: {},
        schoolclassList: [],
        queryParamsCourse: {},
        courseList: [],
        result_numberall: "",
        week_day: "",
        getschedulingtablelist: [],


      }
    },
    watch: {
      'calendardata': {
        handler() {
          this.startnow();
          // console.log("变化了:" + this.calendardata);
          // 获取当前的年份
          var year = this.calendardata.getFullYear();

          // 获取当前的月份（注意月份从0开始计数）
          var month = this.calendardata.getMonth() + 1; // 需要加上1才能得到正确的月份值
          this.queryParamsScheduling.year = year;
          this.queryParamsScheduling.month = month;
          //获取课程表列表
          this.getSchedulingtablelistCount();
          this.getSchedulingList();
        }
      },
      'classTeacher': {
        handler() {
          if (this.classTeacher == "全部教师") {
            this.queryParamsScheduling.classTeacher = null;
          } else {
            this.queryParamsScheduling.classTeacher = this.classTeacher;
          }
          this.getSchedulingtablelistCount();
          this.getSchedulingList();

        }

      },
      'classStudent': {
        handler() {
          if (this.classStudent == "全部学生") {
            this.queryParamsScheduling.classStudent = null;
          } else {
            this.queryParamsScheduling.classStudent = this.classStudent;
          }
          this.getSchedulingtablelistCount();
          this.getSchedulingList();
        }
      },

    },

    created() {
      // 创建一个新的日期对象
      var date = new Date();
      // 获取当前的年份
      var year = date.getFullYear();
      // 获取当前的月份（注意月份从0开始计数）
      var month = date.getMonth() + 1; // 需要加上1才能得到正确的月份值
      this.queryParamsScheduling.year = year;
      this.queryParamsScheduling.month = month;






      //获取查询的列表字段
      this.getTeacherList();
      this.getStudentList();
      this.getCourseList();

      this.startnow();
    },
    mounted() {
      const params = this.$route.query; // 获取query对象
      // console.log("zz:" + params.name); // 输出{key: 'value'}
      if (params.name != null) {
        this.classCourse = "全部课程";
        this.classTeacher = "全部教师";
        this.classStudent = params.name;
        this.queryParamsScheduling.classStudent = params.name;

      } else {
        this.classCourse = "全部课程";
        this.classTeacher = "全部教师";
        this.classStudent = "全部学生";
      }
      //获取课程表列表
      this.getSchedulingtablelistCount();
      this.getSchedulingList();
    },

    methods: {
      addSchedulingSuccess() {
        //获取课程表列表
        this.getSchedulingtablelistCount();
        this.getSchedulingList();
      },
      handleChange(arr) {
        if (arr.length == 1) {

          if (arr[0] == "全部课程") {
            this.queryParamsScheduling.classCourse = null;
            this.queryParamsScheduling.className = null;
          } else {
            this.queryParamsScheduling.classCourse = arr[0];
            this.queryParamsScheduling.className = null;
          }
        } else if (arr.length == 2) {
          this.queryParamsScheduling.classCourse = arr[0];
          this.queryParamsScheduling.className = arr[1];
        }
        //获取课程表列表
        this.getSchedulingtablelistCount();
        this.getSchedulingList();


      },
      getSchedulingtablelistCount() {

        this.queryParamsScheduling.deptId = this.$store.state.user.deptId;
        schedulingtablelist(this.queryParamsScheduling).then(response => {
          // console.log(response);
          if (response.code == 200) {
            this.getschedulingtablelist = response.rows;
          }



        });
      },

      my_date(v) {


        let len = this.getschedulingtablelist.length
        var res = ""
        for (let i = 0; i < len; i++) {
          if (this.getschedulingtablelist[i].date == v) {
            var res = this.getschedulingtablelist[i].content;

            if (res == 0) {
              res = ""
            } else {
              res = res + "节课"
            }

            break
          }
        }
        return res
      },
      my_date2(v) {


        let len = this.getschedulingtablelist.length

        for (let i = 0; i < len; i++) {
          if (this.getschedulingtablelist[i].date == v) {

            // var res = this.getschedulingtablelist[i].content;
            var haveNoSettlement = this.getschedulingtablelist[i].haveNoSettlement;



            break
          }
        }
        return haveNoSettlement
      },
      startnow() {
        var result_number = this.calculateDaysBetween(this.formatDate(this.calendardata), this.formatDate(new Date()));
        // console.log(result_number);
        if (result_number == 0) {
          this.result_numberall = "今天"
        } else {
          if (this.formatDate(this.calendardata) > this.formatDate(new Date())) {
            result_number = result_number + "天后";
          } else {
            // console.log("前");
            result_number = result_number + "天前";
          }
          this.result_numberall = result_number
        }


        var WeekDay = this.getWeekDay(this.formatDate(this.calendardata));
        this.week_day = WeekDay;
        var month = this.formatDate3(this.calendardata);
        this.now_month = month;
      },
      getWeekDay(date) {
        if (typeof date === 'string') {
          date = date.replace(/-/g, '/')
        }

        const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        const myDate = new Date(Date.parse(date));
        return weekDay[myDate.getDay()];
      },

      formatDate(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}-${month}-${day} `;
      },
      formatDate2(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}年${month}月${day}日 `;
      },
      formatDate3(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}年${month}月  `;
      },

      getSchedulingList() {
        // console.log("111");
        this.loading = true;
        this.queryParamsScheduling.studyDate = this.formatDate(this.calendardata);

        this.queryParamsScheduling.deptId = this.$store.state.user.deptId;
        listScheduling(this.queryParamsScheduling).then(response => {
          this.schedulingList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      tonow(item) {
        console.log("iD:" + item.id);

        this.$refs.SchoolTimetableDrawer.openschooltimetable(item.id);

      },

      ChangeCourseName(classCourse) {
        console.log(classCourse);
        // this.form.className=null
        this.$set(this.form, 'className', null)


        this.getSchoolclassList(classCourse)
      },

      /** 查询班级列表 */
      getSchoolclassList(classCourse) {
        this.queryParamsSchool.classCourse = classCourse;
        this.queryParamsSchool.deptId = this.$store.state.user.deptId;
        listSchoolclass(this.queryParamsSchool).then(response => {
          this.schoolclassList = response.rows;

        });
      },

      /** 查询课程管理列表 */
      getCourseList() {

        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        this.queryParamsCourse.courseState = "在开课程";
        listCourse_And_Class(this.queryParamsCourse).then(response => {

          // this.courseList = response.rows;

          this.courseList.push({
            "id": "100",
            "label": "全部课程",
            "value": "全部课程"
          })
          this.courseList.push(...response.rows)

        });
      },
      addscheduling() {
        this.$refs.SchedulingDrawer.open();
      },
      changescheduling() {



        this.$router.push({
          path: "/scheduling/changescheduling",
          // query:{
          //   id:row.id,
          //   form:JSON.stringify(this.form)
          // }
        })
      },
      getTeacherList() {

        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;

        listUser2(this.queryParamsTeacher).then(response => {

          this.userList.push({
            "id": "100",
            "nickName": "全部教师",

          })
          this.userList.push(...response.rows)

        });
      },
      /** 查询学生信息列表 */
      getStudentList() {

        this.queryParamsStudent.deptId = this.$store.state.user.deptId;
        listStudent(this.queryParamsStudent).then(response => {
          // this.studentList = response.rows;

          this.studentList.push({
            "id": "100",
            "userName": "全部学生"
          })
          this.studentList.push(...response.rows)


        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          schedulingremark: null,
          schedulingremark2: null,
          schedulingremark3: null,
          schedulingremark4: null,
          schedulingremark5: null,
          schedulingremark6: null,
          schedulingremark7: null,
          schedulingremark8: null,
          schedulingremark9: null,
          schedulingremark10: null,
          classId: null,
          studyDate: null,
          week: null,
          state: null,
          reach: null,
          unreach: null,
          askforleave: null,
          attendance: null,
          totalConsumption: null
        };
        this.resetForm("form");
      },

    }
  };
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    width: 100%;
    // flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }



  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }
</style>
